﻿import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    id:rootView
    property color borderColor: "red"
   // border.color: borderColor
    color: Qt.rgba(Math.random(),Math.random(),Math.random(),0.8);
    signal signalClickedItem(int index);
    property ListModel myModel
    property  int itemHeight: 30
    Behavior on height {
        NumberAnimation { duration: 300;easing.type: Easing.InOutQuad }
    }
    //height: myModel.count*40+20
    Text {
        id: name
        text: qsTr("text")
        height: 30
        horizontalAlignment: Text.AlignHCenter;
        width: viewId.width
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 20
        clip: true
    }
    function setText(idx){
        name.text =  idx;
    }
    //height: myModel.count*40+20
    Item {
        anchors.fill: parent
        anchors.margins: 2
         anchors.topMargin: 30
        Component {
            id: contactDelegate
            Rectangle {
                width: viewId.width; height: itemHeight
                color: ma.containsMouse?"#F0F0F0":(viewId.currentIndex == index?"#F0F0F0":"transparent")
                Text {
                    text: name;
                    horizontalAlignment: Text.AlignHCenter;
                    width: viewId.width
                    verticalAlignment: Text.AlignVCenter
                    anchors.centerIn: parent
                    font.strikeout: true
                    color: ma.containsMouse?"#21be2b":(viewId.currentIndex == index?"#21be2b":"#FFFFFF")
                }
                MouseArea{
                    id:ma
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        console.log("clicked item ",index);
                        signalClickedItem(index);
                    }
                }
            }
        }
        ListView {
            id:viewId
            anchors.fill: parent
            model: myModel
            delegate: contactDelegate
            clip: true
            focus: true
            ScrollBar.vertical: ScrollBar {
            }
        }
    }
}
